<script lang="ts" setup>

import {onMounted, ref} from "vue";
import IngredientItem from "@/components/IngredientItem.vue";
import axios from "axios";
import router from "@/router";
import {parseIngredient} from '@/util/checkHasStore'
import {useRoute} from "vue-router";
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
const $toast = useToast();//消息提示栏
const searchText = ref('')

const ingredientList = ref([])
const fragranceList = ref([])
const initData = () => {
  axios.post("/api/fragrance/queryList", {}, {
    headers: {
      token: localStorage.getItem("patient-auth-token")
    }
  }).then(res => {
    const msg = res.data.message
    for (let i = 0; i < msg.length; i++) {
      msg[i].ingredientInfos = parseIngredient(msg[i].ingredientInfos)
    }
    fragranceList.value = msg
  })
}
const isSearch = ref(false)
const page = ref({
  page: ref(1),
  size: 20,
  total: ref(0)
})
const searchData = () => {

  if (searchText.value != '') {
    isSearch.value = true
    searchLoading.value = true
    console.log(1)
    showLoading.value = "正在加载中，请稍等..."
    axios.post(`/api/ingredient/search/${page.value.page}/${page.value.size}?name=${searchText.value}`
        , {}, {
          headers: {
            token: localStorage.getItem("patient-auth-token")
          }
        }).then(res => {
      console.log(res)
      const msg = res.data.message
      ingredientList.value = msg.list
      page.value.total = msg.total
      if (ingredientList.value.length == 0) {
        showLoading.value = '减少关键字试试？暂无符合条件的香料'
      } else {
        searchLoading.value = false
      }
    })
  } else {
    $toast.open({
      message:"输入关键字试试？",
      type:"warning",
      position:"bottom-right"
    })
    isSearch.value = false
    initData()

  }
}
const route = useRoute()

onMounted(() => {
  if (route.query.name) {
    searchText.value = route.query.name
    searchData()
  }
  initData()
})

const showLoading = ref('正在加载中，请稍等')
const searchLoading = ref(false)
//跳转查看更多
const viewMore = (index) => {
  router.push("/fragrance?id=" + index)
}

</script>

<template>
  <div class="ingredient-main">
    <div class="ingredient-title">配料</div>
    <div class="ingredient-introduce">选择一种或多种成分，将它们组合在一起，就能找到完美的香味。</div>
    <div class="search-box" >
      <q-input v-model="searchText" color="grey-6" label="搜索成分..." outlined rounded
               style="width: 60vw" @keyup.enter="searchData">
        <template v-slot:append>
          <q-icon name="search" @click="searchData"/>
        </template>
      </q-input>
    </div>
    <div class="ingredient-group" v-show="isSearch">
      <IngredientItem v-for="(item,index) in ingredientList"
                      :key="index"
                      :fragrance-noted-id="item.fragranceNoteId"
                      :img="item.img"
                      :ingredient-id="item.ingredientId"
                      :is-add="item.isAdd"
                      :name="item.name"
      />
      <div v-show="searchLoading && isSearch" class="q-pa-md" style="width: 100%;">
        <div class="q-gutter-md">
          <view style="display: flex;align-items: center">
            <q-skeleton size="100px" type="circle"/>
            <view class="text-h4" style="margin-left: 30px;">{{ showLoading }}</view>
          </view>
          <q-skeleton width="150px"/>
          <q-skeleton height="150px"/>
        </div>
      </div>
    </div>
    <div v-show="!isSearch" class="fragrance-group">
      <div v-for="(item) in fragranceList" :key="item.fragranceNoteId" class="fragrance-item">
        <div class="fragrance-item-title">
          <view>{{ item.name }}（{{ item.ingredientInfoSize }}）</view>
          <view v-if="item.ingredientInfos.length < item.ingredientInfoSize" class="cursor-pointer"
                style="font-size: 15px" @click="viewMore(item.fragranceNoteId)">查看更多
          </view>
        </div>
        <div class="fragrance-box">
          <IngredientItem v-for="(item,index) in item.ingredientInfos"
                          :key="index"
                          :fragrance-noted-id="item.fragranceNoteId"
                          :img="item.img"
                          :ingredient-id="item.ingredientId"
                          :is-add="item.isAdd"
                          :name="item.name"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ingredient-main {
  height: 95vh;
  width: 100vw;


  .ingredient-group {
    display: flex;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .ingredient-title {
    margin-top: 4vh;
    margin-bottom: 2vh;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ingredient-introduce {
    margin-bottom: 2vh;
    font-size: 18px;
    text-align: center;
  }

  .search-box {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fragrance-group {
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    display: flex;
    flex-direction: column;

    .fragrance-item {
      margin-top: 40px;
    }

    .fragrance-item-title {
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .fragrance-box {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
